<template>
  <div style="display: flex; font-size: 12px ;">
    <div style="flex: 1; font-size: 25px;">
      <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>

      <el-breadcrumb separator="/" style="display: inline-block; margin-left: 50px; margin-bottom: 2px;">
        <el-breadcrumb-item v-for="headerCrumb in headerCrumbList" :key="headerCrumb.path" :to="headerCrumb.path">
          {{headerCrumb.meta.title}}
        </el-breadcrumb-item>
      </el-breadcrumb>


    </div>
    <div style="display: inline-block; margin-right: 50px;">
      <el-button @click="outFrontHome">去前台瞧瞧</el-button>
    </div>
    <div style="margin-right: 100px">
      <div style="display:flex; font-size: 12px" class="" @mouseenter="inUser" @mouseleave="outUser">
        <el-dropdown  class="showUser">
          <el-dropdown-menu></el-dropdown-menu>
          <div class="userimg">
            <div class="userimg_tu inline_block">
              <!--  -->
              <img :src="user.avatarUrl" alt="">
              <transition name="el-fade-in-linear">
                <div v-show="showUser" class="caidan">
                <div style="height: 50px;width: 100%;"></div>
                <div style="width:100%;height: 50px;text-align: center;line-height: 50px;"><h2 style=" font-size: 20px;font-weight: 800">{{user.nickname}}</h2></div>
                <div style="width:100%;color: #9499a0;">
                  <div class="inline_block pingjun bianse">商品收藏</div>
                  <div class="inline_block pingjun bianse">我的足迹</div>
                </div>
                <div class="genr">
                  <router-link to="/front/changePassword" style="text-decoration: none">
                    <span class="genren"><i class="el-icon-key"></i>修改密码</span>
                  </router-link>
                </div>
                <div class="genr">
                  <router-link to="/front/person" style="text-decoration: none">
                    <span class="genren"><i class="el-icon-user-solid"></i>个人信息</span>
                  </router-link>
                </div>
                <div class="genr">
                  <span class="genren" style="text-decoration: none" @click="logOut">退出</span>
                </div>
              </div>
              </transition>

            </div>
          </div>
        </el-dropdown>
      </div>
    </div>
  </div>


</template>

<script>


export default {
  name: "Header",
  props:{
    collapseBtnClass: String,
    collapse: Function,
    user: Object
  },
  data(){
    return{
      paths: [],
      showUser: false

    }
  },
  mounted() {
    console.log(this.$route)
  },
  computed:{
    headerCrumbList(){
      return this.$route.matched;
    }
  },
  methods:{
    logOut(){

      this.$store.commit("logoutOn")
      this.$message.info("退出成功")
    },
    outFrontHome(){
      this.$router.push("/front/home")
    },
    //鼠标悬停头像
    inUser(){
      this.showUser =true
    },
    //鼠标移出
    outUser(){
      this.showUser =false
    }
  }
}
</script>

<style scoped lang="less">
/*头像*/
.showUser{
  width: 80px;
  height: 60px;
  cursor: pointer;
  .userimg {
    display: inline-block;
    width: 80px;
    height: 60px;
    position: relative;
    .userimg_tu {
      width: 80px;
      height: 60px;
      img{

        background-size: contain;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 4px solid white;
        position: relative;
        top: 5px;
        z-index: 2153;
        transition-property: width height;
        transition-duration: 0.3s;
      }

      .caidan{
        display: none;
        position:absolute;
        width: 250px;
        height: 300px;
        top: 65px;
        opacity: 0;
        left: -74px;
        z-index: 2000;
        border-radius: 15px 15px 15px 15px;
        background-color: white ;
        box-shadow:5px 5px 15px #999;
        transition-duration: 0.4s;
        transition-delay: 0.1s;
      }
    }
    .userimg_tu:hover img{
      left: 0px;
      top: 20px;
      width: 110px;
      height: 110px;
    }
    .userimg_tu:hover .caidan{
      display: block;
      top: 70px;
      opacity: 1;
    }
  }
}
.inline_block{
  display: inline-block;
}
.pingjun{
  width:125px;
  text-align: center;
}
.bianse:hover{
  color: #00aeec;
}
.genr{
  margin: 0 auto;
  margin-top: 3px;
  width: 200px;
  height: 40px;
  line-height: 40px;
  border-radius: 8px;
  text-align: center;
  .genren{
    color: #61666D;
  }
}
.genr:hover{
  background-color: #E3E5E7;
}
</style>